<template>
  <div class="el-dialog-div" ref="formBox">
    <el-form ref="form" :model="form" label-width="130px" :rules="rules">
      <el-form-item label="场馆" prop="venueName">
        <el-input v-model="form.venueName" class="input-W" placeholder="场馆名称" disabled="true"/>
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="form.name" class="input-W" placeholder="商品名称" />
      </el-form-item>
      <el-form-item label="商品编号" prop="goodsNo">
        <el-input v-model="form.goodsNo" class="input-W" placeholder="商品编号" />
      </el-form-item>
      <!--<el-form-item label="商品分类" prop="typeCode">-->
        <!--<el-select v-model="form.typeCode" placeholder="" clearable class="input-W">-->
          <!--<el-option v-for="dict in this.categorylist" :key="dict.value" :label="dict.label" :value="dict.value" />-->
        <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item label="置换价(元)" prop="cashPrice">
        <el-input v-model="form.cashPrice" class="input-W" placeholder="请输入成本价格" />
      </el-form-item>

      <el-form-item label="成本价格(元)" prop="costPrice">
        <el-input v-model="form.costPrice" class="input-W" placeholder="请输入成本价格" />
      </el-form-item>
      <el-form-item label="是否上架" prop="isPutaway">
        <el-select v-model="form.isPutaway" placeholder="上架状态" clearable class="input-W" @change="$forceUpdate()">
          <el-option v-for="dict in this.dict.type.goods_putaway_status" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="orderNum">
        <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
      </el-form-item>
      <el-form-item label="缩略图" prop="imgMin">
        <image-upload :valueData="form.imgMin" params="imgMin" @uploaded="uploaded"></image-upload>
      </el-form-item>
      <el-form-item label="大图" prop="minList">
        <image-upload :valueData="form.minList" params="minList" @uploaded="uploaded"></image-upload>
      </el-form-item>
      <el-form-item label="商品详情" prop="details">
        <editor :value="form.details" :height="400" ref="editor"></editor>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { pickGoodesEnum, goodsPayTypeEnum } from '@/common/enums'

export default {
  name: 'formView',
  dicts: ['goods_putaway_status'],
  props: {
    form: {
      type: Object,
    },
    venueList: {
      type: Array,
    },
    secCodeList: {
      type: Array,
    },
    categorylist: {
      type: Array,
    },

  },

  data() {

    const validtext = (rule, value, callback) => {
      let textValue = this.$refs.editor.currentValue;
      if (!textValue) {
        callback(new Error('请输入详情内容'))
      } else {
        callback()
      }
    };
    const imgValidtext = (rule, value, callback) => {
      let textValue = this.form.minList;
      if (textValue && textValue[1] != ']') {
        callback()
      } else {
        callback(new Error('请上传大图'))
      }
    }
    return {
      goodsPayTypeEnum,
      pickGoodesEnum,

      rules: {
        name: [{ required: true, message: "商品名称必填", trigger: "blur" }], //商品名称
        secCode: [{ required: true, message: "购买赠送类型必填", trigger: "blur" }], //购买赠送类型
        // silverPrice: [{ required: true, message: "必填", trigger: "blur" }], //银积分价格
        cashPrice: [{ required: true, message: "起购价格必填", trigger: "blur" }], //现金价格
        isPutaway: [{ required: true, message: "是否上架必选", trigger: "blur" }], //是否上架
        // resellNum: [{ required: true, message: "必填", trigger: "blur" }], //止售次数
        // imgMin: [{ required: true, message: "必填", trigger: "blur" }],  //小图
        minList: [{ required: true, message: "大图必填", trigger: ["blur", "change"], validator: imgValidtext }],  //大图
        goodsNo: [{ required: true, message: "商品编号必填", trigger: "blur" }], //商品编号
        costPrice: [{ required: true, message: "成本价格必填", trigger: "blur" }], //成本价格
        details: [{ required: true, trigger: ["blur", "change"], validator: validtext }],
        silverPrice: { required: false, message: "请输入兑换价", trigger: "blur" },//兑换价格
        giveGold: { required: false, message: "请输入金积分赠送数", trigger: "blur" },//金积分赠送数
        giveVip: { required: false, message: "请输入金牌席位赠送天数", trigger: "blur" },//金牌席位赠送数
      },
    }
  },
  mounted() {
  },
  updated() {
  },
  methods: {


    uploaded(params, dict) {
      this.form[params] = JSON.stringify(dict);
    },
  }
}
</script>

<style lang="scss" scoped>
.el-dialog-div {
  height: 70vh;
  overflow: auto;
  padding-right: 30px;
}

.input-W {
  width: 100%;
}
</style>
